<template>
  <div>
    <div class="search-box">
      <el-date-picker
        v-model="dateList"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-select
        v-model="indicatrix"
        placeholder="请选择"
        style="margin-left: 16px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 16px" @click="getChartData"
        >查询</el-button
      >
    </div>
    <div ref="chart" style="width: 100%; height: calc(100vh - 120px)" />
    <div class="level-box">
      <div v-for="(item, index) in levelList" :key="index" class="color-box">
        <div></div>
        <div class="color-div" :style="{ background: item.color }"></div>
        <div>
          {{ item.level }}（{{ item.lower - 0 }}~{{ item.upper - 0
          }}{{ item.unit }}）
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import shanxiMap from "./shanxiMap.json";
// import taiyuanMap from "./taiyuanMap.json";
import {
  queryLegend,
  queryHospitalIndex,
  queryHospital,
} from "@/api/atlas/index";
export default {
  data() {
    return {
      dateList: [],
      indicatrix: "DNT", // DNT DRT  DPT
      options: [
        {
          value: "DNT",
          label: "DNT分布图",
        },
        {
          value: "DRT",
          label: "DRT分布图",
        },
        {
          value: "DPT",
          label: "DPT分布图",
        },
      ],
      hospitalList: [],
      levelList: [],
      hospitaColorlList: [],
    };
  },
  mounted() {},
  created() {
    this.getColorData();
    this.getHospitalLocation();
  },
  methods: {
    getChartData() {
      this.getHospitalLocation();
      this.getColorData();
    },
    initMap() {
      setTimeout(() => {
        const myChart = this.$echarts.init(this.$refs.chart);
        this.$echarts.registerMap("taiyuanMap", taiyuanMap);
        const option = {
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(255,255,255,0.75)",
            borderColor: "#ccc", // 设置边框颜色为深灰色
            textStyle: { color: "#333" },
            formatter: function (params) {
              return (
                params.name +
                "<br/>经度：" +
                params.value[0] +
                "<br/>纬度：" +
                params.value[1] +
                "<br/>病例数据：" +
                (params.data.cusDomValue - 0)
              );
            },
          },
          geo: {
            type: "map", // 设置图表类型为地图
            map: "taiyuanMap", // 地图要加载的JSON文件
            zoom: 1.32, // 地图缩放大小，这个根据自己需求，默认是1，不缩放
            roam: true,
            scaleLimit: {
              min: 1,
              max: 10,
            },
            layoutCenter: ["50%", "46%"], //  定义地图中心在屏幕中的位置
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: 650,
            aspectScale: 0.9, // 长宽比
            itemStyle: {
              // 这里就是设置item 的样式，也就是地图中每个区块的样式（区块就是JSON文件中包含经纬度信息的对象，获取的地图JSON文件中应该有一个数组，其中的每一个对象就对应一个区块）
              normal: {
                // 区块的基本样式
                borderColor: "#41b8ff", // 区块的边界（边框）颜色
                borderWidth: 3, // 区块的边界（边框）宽度
              },
              emphasis: {
                // 区块高亮时的样式（鼠标移入的时候可以选中进行高亮显示）
                borderColor: "#fff",
                shadowBlur: 10, // 模糊度
                shadowColor: "rgba(0,255,244,0.6)", // 模糊阴影的颜色
                borderWidth: 4,
                color: "#41b8ff", // 鼠标选择区域颜色
              },
            },
          },
          series: [
            {
              name: "标注",
              type: "scatter", // 使用散点图
              coordinateSystem: "geo", // 坐标系为地理坐标系
              clickable: true,
              data: this.hospitaColorlList.map((item) => {
                return {
                  name: item.hospitalName, // 可以在 tooltip 中显示
                  value: [item.lng - 0, item.lat - 0], // 经纬度
                  cusDomValue: item.indicatrixValue,
                  // 可以添加其他自定义字段，如 value、itemStyle 等
                  itemStyle: {
                    color: item.color, // 散点颜色
                  },
                  label: {
                    show: true, // 显示标签
                    // formatter: "{b}<br/>病例数: 1999", // 格式化标签内容，{b} 表示数据项的名称
                  },
                };
              }),
              // [
              //   // 假设我们要标注的坐标点是北京的某个位置
              //   {
              //     name: "太原市中心医院", // 可以在 tooltip 中显示
              //     value: [112.571563, 37.891619], // 经纬度
              //     cusDomValue: "太原市杏花岭区东三道巷1号",
              //     // 可以添加其他自定义字段，如 value、itemStyle 等
              //     itemStyle: {
              //       color: "red", // 散点颜色
              //     },
              //     label: {
              //       show: true, // 显示标签
              //       // formatter: "{b}<br/>病例数: 1999", // 格式化标签内容，{b} 表示数据项的名称
              //     },
              //   },
              //   // ... 可以添加更多标注点
              // ],
              symbolSize: 20, // 散点大小
              label: {
                formatter: "{b}", // {c} 表示自定义的 label.formatter
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
              // tooltip: {
              //   enable: true,
              //   trigger: "hover",
              //   formatter: function (params) {
              //     console.log("params: ", params);
              //     // 在这里可以返回自定义的 tooltip 内容
              //     return (
              //       params.name +
              //       "<br/>经度：" +
              //       params.value[0] +
              //       "<br/>纬度：" +
              //       params.value[1]
              //     );
              //   },
              // },
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    // 查询当前医院,并且返回经纬度
    getHospitalLocation() {
      const param = {
        startDate: "",
        endDate: "",
      };
      if (this.dateList && this.dateList.length) {
        param.startDate = this.dateList[0];
        param.endDate = this.dateList[1];
      }
      queryHospital(param).then((res) => {
        this.hospitalList = [...res.data];
        this.hospitaColorlList = [];
        for (let i = 0; i < res.data.length; i++) {
          this.getHospitalData(res.data[i].deptName);
        }
      });
    },
    // 查询当前医院的指标信息
    getHospitalData(hospitalName) {
      const param = {
        indicatrix: this.indicatrix,
        hospitalName,
      };
      queryHospitalIndex(param).then((res) => {
        let data = [...res.data];
        let arr = [...this.hospitaColorlList];
        for (let i = 0; i < data.length; i++) {
          const hos = data[i]; // 每个医院的数据为list, 所以遍历(估计是怕某个医院有两个地方)
          for (let k = 0; k < this.levelList.length; k++) {
            const level = this.levelList[k]; // 某个等级
            if (
              hos.indicatrixValue - 0 > level.lower - 0 &&
              hos.indicatrixValue - 0 < level.upper - 0
            ) {
              hos.color = level.color;
            }
            if (hos.indicatrixValue - 0 == 0 && level.upper - 0 == 0) {
              hos.color = level.color;
            }
          }
          arr.push(hos);
        }
        this.hospitaColorlList = [...arr];
        console.log("this.hospitaColorlList: ", this.hospitaColorlList);
        // this.initMap();
      });
    },
    // 根据指标查询图例信息
    getColorData() {
      const param = {
        name: this.indicatrix,
      };
      queryLegend(param).then((res) => {
        this.levelList = [...res.data];
      });
    },
  },
};
</script>
<style scoped>
.level-box {
  position: fixed;
  right: 24px;
  bottom: 24px;
}
.color-box {
  display: flex;
  align-items: center;
  /* margin-top: 8px; */
  font-size: 14px;
}
.color-div {
  height: 18px;
  width: 24px;
  margin: 0 16px;
}
.search-box {
  height: 60px;
  padding-left: 16px;
  display: flex;
  align-items: center;
}
</style>
